{extend name="common/common" /}

{block name="style"}
<link href="__CSS__/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<style media="screen">
.tips{
	border:1px solid #E6A23C;
	color:#E6A23C;
	font-size: 16px;
	box-shadow: #E6A23C 0px 2px 12px 0px;
	font-family: "宋体";
	margin-bottom: 25px;
}
.table.table-bordered.table-striped tr td {
	line-height: 26px;
}
.ibox-title h5{
	float:none;
	font-weight: 999;
}
.span-danger{
	font-family: "宋体";
	font-weight: 999;
}
.el-radio-button--mini .el-radio-button__inner {
	padding: 7px 10px;
}
.table-public-service-system{
	min-width: 1550px;
}
.el-textarea__inner {
	line-height: 0.7;
}
label{
	margin-bottom: 0;
}
.el-dialog__body input[type="file"]{
	display: none;
}
</style>
{/block}

{block name="component"}
{/block}

{block name="content"}
<el-row>
	<el-col :lg="10">
		<div class="ibox-title">
		    <h5>
				<span class="span-primary">{{form.rptDate}}年 {{form.departName}}</span>
				经济发展年报表
			</h5>
		</div>
		<div class="ibox-content">
			<el-form :model="form" :rules="rules" ref="form" label-width="100px" inline>
				<el-form-item label="填表人" prop="linkMan">
					<el-input size="mini" v-model="form.linkMan"></el-input>
				</el-form-item>
				<el-form-item label="电话" prop="linkType">
					<el-input size="mini" v-model="form.linkType"></el-input>
				</el-form-item><br>
				<table class="table table-bordered table-striped text-center">
					<tr>
						<th class="text-center">标号</th>
						<th class="text-center">指标</th>
						<th class="text-center" width="200">数值</th>
					</tr>
					<tr>
						<td>1</td>
						<td class="text-right">地区生产总值（亿元）</td>
						<td>
							<el-input type="number" size="mini" v-model="form.economyYear[0]"></el-input>
						</td>
					</tr>
					<tr>
						<td>2</td>
						<td class="text-right">社会消费品零售总额（亿元）</td>
						<td>
							<el-input type="number" size="mini" v-model="form.economyYear[1]"></el-input>
						</td>
					</tr>
					<tr>
						<td>3</td>
						<td class="text-right">面积（平方公里）</td>
						<td>
							<el-input type="number" size="mini" v-model="form.economyYear[2]"></el-input>
						</td>
					</tr>
					<tr>
						<td>4</td>
						<td class="text-right">乡镇数量（个）</td>
						<td>
							<el-input type="number" size="mini" v-model="form.economyYear[3]"></el-input>
						</td>
					</tr>
					<tr>
						<td>5</td>
						<td class="text-right">行政村数量（个）</td>
						<td>
							<el-input type="number" size="mini" v-model="form.economyYear[4]"></el-input>
						</td>
					</tr>
					<tr>
						<td>6</td>
						<td class="text-right">常住人口（万人）</td>
						<td>
							<el-input type="number" size="mini" v-model="form.economyYear[5]"></el-input>
						</td>
					</tr>
					<tr>
						<td>7</td>
						<td class="text-right">城镇人口（万人）</td>
						<td>
							<el-input type="number" size="mini" v-model="form.economyYear[6]"></el-input>
						</td>
					</tr>
					<tr>
						<td>8</td>
						<td class="text-right">农村人口（万人）</td>
						<td>
							<el-input type="number" size="mini" v-model="form.economyYear[7]"></el-input>
						</td>
					</tr>
					<tr>
						<td>9</td>
						<td class="text-right">居民人均可支配收入（元）</td>
						<td>
							<el-input type="number" size="mini" v-model="form.economyYear[8]"></el-input>
						</td>
					</tr>
					<tr>
						<td>10</td>
						<td class="text-right">城镇居民人均可支配收入（元）</td>
						<td>
							<el-input type="number" size="mini" v-model="form.economyYear[9]"></el-input>
						</td>
					</tr>
					<tr>
						<td>11</td>
						<td class="text-right">农村居民人均可支配收入（元）</td>
						<td>
							<el-input type="number" size="mini" v-model="form.economyYear[10]"></el-input>
						</td>
					</tr>
					<tr>
						<td>12</td>
						<td class="text-right">农村公路里程数（公里）</td>
						<td>
							<el-input type="number" size="mini" v-model="form.economyYear[11]"></el-input>
						</td>
					</tr>
					<tr>
						<td>13</td>
						<td class="text-right">固定电话年末用户（万户）</td>
						<td>
							<el-input type="number" size="mini" v-model="form.economyYear[12]"></el-input>
						</td>
					</tr>
					<tr>
						<td>14</td>
						<td class="text-right">移动电话年末用户（万户）</td>
						<td>
							<el-input type="number" size="mini" v-model="form.economyYear[13]"></el-input>
						</td>
					</tr>
					<tr>
						<td>15</td>
						<td class="text-right">其中：3G/4G移动电话用户(万户)</td>
						<td>
							<el-input type="number" size="mini" v-model="form.economyYear[14]"></el-input>
						</td>
					</tr>
					<tr>
						<td>16</td>
						<td class="text-right">互联网宽带接入用户（万户）</td>
						<td>
							<el-input type="number" size="mini" v-model="form.economyYear[15]"></el-input>
						</td>
					</tr>
					<tr>
						<td>17</td>
						<td class="text-right">个体工商户数（家）</td>
						<td>
							<el-input type="number" size="mini" v-model="form.economyYear[16]"></el-input>
						</td>
					</tr>
					<tr>
						<td>18</td>
						<td class="text-right">注册企业数量(企业法人单位数)（家）</td>
						<td>
							<el-input type="number" size="mini" v-model="form.economyYear[17]"></el-input>
						</td>
					</tr>
					<tr>
						<td>19</td>
						<td class="text-right">网店数量（包含电脑端和手机端）（个）</td>
						<td>
							<el-input type="number" size="mini" v-model="form.economyYear[18]"></el-input>
						</td>
					</tr>
					<tr>
						<td>20</td>
						<td class="text-right">其中：手机网店/微店数量（个）</td>
						<td>
							<el-input type="number" size="mini" v-model="form.economyYear[19]"></el-input>
						</td>
					</tr>
					<tr>
						<td>21</td>
						<td class="text-right">电子商务交易额（万元）</td>
						<td>
							<el-input type="number" size="mini" v-model="form.economyYear[20]"></el-input>
						</td>
					</tr>
					<tr>
						<td>22</td>
						<td class="text-right">网络零售额（万元）</td>
						<td>
							<el-input type="number" size="mini" v-model="form.economyYear[21]"></el-input>
						</td>
					</tr>
				</table>
				<p class="text-center">
					<el-button type="primary" plain @click="save">保存表格</el-button>
					<el-button type="success" plain @click="subTable">提交表格</el-button>
				</p>
			</el-form>
		</div>
	</el-col>
</el-row>
{/block}

{block name="script"}
<script type="text/javascript">
var main = new Vue({
	el:"#main",
	data:{
		loading:false,
		form:{
			rptDate:"{$rpt_date}",
			departName:"{$depart_name}",
			departId:"{$depart_id}",
			linkMan:"",
			linkType:"",
			economyYear:[]
		},
		rules:{
			linkMan:[{required:true,message:'填表人不能为空',trigger:['blur','change']}],
			linkType:[{required:true,message:'联系方式不能为空',trigger:['blur','change']}],
		}
	},
	mounted:function(){
		for(var i=0;i<22;i++){
			this.form.economyYear.push("");
		}
	},
	methods:{
		save() {
			this.$refs['form'].validate((valid) => {
				if(valid){
					var param = this.form
					$.post("./SaveYear",param,function(res){
						main.AjaxCallback(res);
					});
				}
			})
		},
		AjaxCallback(res) {
			if(res.code == 1){
				main.$notify({title:"成功",type:"success",message:res.msg})
			}else{
				main.$notify.error({title:"错误",message:res.msg})
			}
		},
		subTable() {
			this.$refs['form'].validate((valid) => {
				if(valid){
					var param = this.form
					$.post("./CommitYear",param,function(response){
						main.AjaxCallback(response);
					});
				}
			})
		}
	}
})
</script>
{/block}
